<template>
  <div class='approver'>
     <!-- 表头 -->
     <div class="header">
      <el-button
        type="primary"
        icon="el-icon-circle-plus-outline"
        round
        @click="addApproverDialog = true"
        >新增审批组</el-button
      >
     </div>
     <!-- 表体 -->
     <div class="table">
      <el-table :data="tableData" height="550" border style="width: 100%" header-align="center" >
        <el-table-column prop="id" label="id" width="40" align="center"> </el-table-column>
        <el-table-column prop="name" label="审批组名称" align="center"> </el-table-column>
        <el-table-column prop="town_name" label="所属区域" align="center"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click.stop="update(scope.row)"
              >编辑</el-button
            >
            <el-button type="text" size="small" @click.stop="del(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
     </div>
     <!-- 新增dialog -->
     <el-dialog title="新增审批组" :visible.sync="addApproverDialog">
      <el-form :model="addApproverForm">
        <el-form-item label="审批组名称" label-width="80">
          <el-input v-model="addApproverForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="审批组所属区域">
          <el-select v-model="addApproverForm.town_id" placeholder="请选择审批组所属区域">
            <el-option v-for="item in townData" :key="item.id" :label="item.town_name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="reset('add')">取 消</el-button>
        <el-button type="primary" @click="addApprover"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 修改dialog -->
    <el-dialog title="修改审批组" :visible.sync="updateApproverDialog">
      <el-form :model="updateApproverForm">
        <el-form-item label="审批组名称" label-width="80">
          <el-input v-model="updateApproverForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="审批组所属区域">
          <el-select v-model="updateApproverForm.town_id" placeholder="请选择审批组所属区域">
            <el-option v-for="item in townData" :key="item.id" :label="item.town_name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="reset('update')">取 消</el-button>
        <el-button type="primary" @click="updateForm"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getApprover,addApprover,updateApprover,deleteApprover } from '@/api/approver/index'
import { getTown } from '@/api/town'
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'approver',
  data() {
    return {
      addApproverDialog:false,
      tableData:[],
      approverData:[],
      townData:[],
      addApproverForm:{
        name:'',
        town_id:''
      },
      updateApproverDialog:false,
      updateApproverForm:{
        name:'',
        town_id:''
      }
    }
  },
  created() {
    this.init()
    this.getTown()
  },
  methods: {
    init(){
      getApprover().then(res=>{
        if(res.status === 0){
          this.tableData = res.data
        }
      })
    },
    // 获取所属区域名称
    getTown(){
      getTown().then(res=>{
        if(res.status === 0){
          this.townData = res.data
        }
      })
    },
    reset(item){
      if(item === 'add'){
        this.addApproverDialog = false
        this.addApproverForm={
          name:'',
          town_id:''
        }
      }
      if(item === 'update'){
        this.updateApproverDialog = false
        this.updateApproverForm={
          name:'',
          town_id:''
        }
      }
    },
    addApprover(){
      this.addApproverDialog = false
      addApprover(this.addApproverForm).then(res=>{
        if(res.status === 0){
          this.$message.success(res.message)
          this.init()
          this.addApproverForm={
          name:'',
          town_id:''
        }
        }
      })
    },
    update(item){
      this.updateApproverDialog = true
      this.updateApproverForm = { ...item }
    },
    updateForm(){
      updateApprover(this.updateApproverForm).then(res=>{
        if(res.status === 0){
          this.$message.success(res.message)
          this.init()
          this.updateApproverDialog = false
          this.updateApproverForm = {
            name:'',
            town_id:''
          }
        }
      })
    },
    del(item){
      deleteApprover(item).then(res=>{
        if(res.status === 0){
          this.$message.success(res.message)
          this.init()
        }
      })
    }
  },
}
</script>
<style lang='less' scoped>
.header {
  text-align: left;
  margin-bottom: 10px;
}
</style>